<template>
  <el-container>
    <el-aside width="200px" style="background-color: #f4f4f4;">
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click="activeTab = '1'">用户管理</el-menu-item>
        <el-menu-item index="2" @click="activeTab = '2'">管理员信息</el-menu-item>
        <el-menu-item index="3" @click="activeTab = '3'">论文管理</el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <div v-if="activeTab === '1'">
        <UserManagement />
      </div>
      <div v-if="activeTab === '2'">
        <AdminInfo />
      </div>
      <div v-if="activeTab === '3'">
        <PaperManagement />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from 'vue';
import UserManagement from './UserManagement.vue';
// import AdminInfo from './AdminInfo.vue';
import PaperManagement from './PaperManagement.vue';

export default {
  setup() {
    const activeTab = ref('1'); // 默认选中用户管理

    return {
      activeTab,
    };
  },
  components: {
    UserManagement,
    // AdminInfo,
    PaperManagement,
  },
};
</script>

<style scoped>
.el-container {
  height: 100vh;
}

.el-aside {
  background-color: #f5f5f5;
}

.el-menu-vertical-demo {
  margin-top: 20px;
}
</style>
